<template>
  <v-md-editor
    ref="editor"
    v-model="Blog.article.articles[Blog.getIndex(props.id)].contentForm"
    height="100vh"
    left-toolbar="undo redo clear | h bold italic strikethrough quote | ul ol table hr | link image code | save | customToolbar |
                    preview | toc | sync-scroll | fullscreen"
    right-toolbar=""
    :toolbar="toolbar"
    :autofocus="true"
    @save="operate(1)"
    @copy-code-success="operate(2)"
  ></v-md-editor>
</template>
<script lang="ts">
export default {
  // name:"mdeditor"
};
</script>
<script lang="ts" setup>
import { useBlog } from "../../../store/blog";
const Blog = useBlog();
const props = defineProps({
  id: {
    type: Number,
    default: 1,
  },
  contentForm: {
    type: String,
    default: "",
  },
});
const toolbar = {
  customToolbar: {
    title: "发表",
    icon: "v-md-icon-tip",
    action(editor: any) {
      operate(3);
    },
  },
};

const date = new Date();
const operate = (type: number) => {
  if (type == 1) {
    new Promise((resolve, reject) => {
      setTimeout(() => {
        let index: number = Blog.getIndex(props.id);
        Blog.article.articles[index].content = JSON.parse(
          JSON.stringify(Blog.article.articles[index].contentForm)
        );

        Blog.article.articles[index].saveDateTime = date.toLocaleString();
        resolve("保存成功!");
      }, 1000);
    }).then((value: any) => {
      ElMessage({
        message: value,
        type: "success",
        grouping: true,
        duration: 500,
      });
    });
  } else if (type == 2) {
    ElMessage({
      message: "复制成功！",
      type: "success",
      grouping: true,
      duration: 500,
    });
  } else {
    let index: number = Blog.getIndex(props.id);
    Blog.article.articles[index].isPublish = true;
    Blog.article.articles[index].publishDateTime = date.toLocaleString();
    ElMessage({
      message: "发表成功！",
      type: "success",
      grouping: true,
      duration: 500,
    });
  }
};
</script>
